@mixin transition($v) {
  
  transition: $v;
}
@mixin animation($v) {
  -ms-animation: $v;
  animation: $v;
}

/*3.8 动画
  name:        hui-animation
*/

.hui-bounce,
.hui-flip,
.hui-flash,
.hui-shake,
.hui-swing,
.hui-wobble,
.hui-ring {
  @include animation(1s ease);
}

.hui-fadein,
.hui-fadeinT,
.hui-fadeinR,
.hui-fadeinB,
.hui-fadeinL,
.hui-bouncein,
.hui-bounceinT,
.hui-bounceinR,
.hui-bounceinB,
.hui-bounceinL,
.hui-rotatein,
.hui-rotateinLT,
.hui-rotateinLB,
.hui-rotateinRT,
.hui-rotateinRB,
.hui-flipin,
.hui-flipinX,
.hui-flipinY {
  @include animation(1s ease-out backwards);
}

.hui-fadeout,
.hui-fadeoutT,
.hui-fadeoutR,
.hui-fadeoutB,
.hui-fadeoutL,
.hui-bounceout,
.hui-bounceoutT,
.hui-bounceoutR,
.hui-bounceoutB,
.hui-bounceoutL,
.hui-rotateout,
.hui-rotateoutLT,
.hui-rotateoutLB,
.hui-rotateoutRT,
.hui-rotateoutRB,
.hui-flipout,
.hui-flipoutX,
.hui-flipoutY {
  @include animation(1s ease-in forwards);
}

// 淡入
.hui-fadein {
  -ms-animation-name: fadein;
  animation-name: fadein;
}

// 淡入-从上
.hui-fadeinT {
  -ms-animation-name: fadeinT; 
  animation-name:fadeinT;
}

// 淡入-从右
.hui-fadeinR {
  -ms-animation-name: fadeinR;
  animation-name: fadeinR;
}

/* 淡入-从下 */
.hui-fadeinB{-ms-animation-name:fadeinB;animation-name:fadeinB}
/* 淡入-从左 */
.hui-fadeinL{-ms-animation-name:fadeinL;animation-name:fadeinL}
/* 淡出 */
.hui-fadeout{-ms-animation-name:fadeout;animation-name:fadeout}

/* 淡出-向上 */
.hui-fadeoutT{-ms-animation-name:fadeoutT;animation-name:fadeoutT}
/* 淡出-向右 */
.hui-fadeoutR{-ms-animation-name:fadeoutR;animation-name:fadeoutR}
/* 淡出-向下 */
.hui-fadeoutB{-ms-animation-name:fadeoutB;animation-name:fadeoutB}
/* 淡出-向左 */
.hui-fadeoutL{-ms-animation-name:fadeoutL;animation-name:fadeoutL}

/* 弹跳 */
.hui-bounce{-ms-animation-name:bounce;animation-name:bounce}

/* 弹入 */
.hui-bouncein{-ms-animation-name:bouncein;animation-name:bouncein}
/* 弹入-从上 */
.hui-bounceinT{-ms-animation-name:bounceinT;animation-name:bounceinT}
/* 弹入-从右 */
.hui-bounceinR{-ms-animation-name:bounceinR;animation-name:bounceinR}
/* 弹入-从下 */
.hui-bounceinB{-ms-animation-name:bounceinB;animation-name:bounceinB}
/* 弹入-从左 */
.hui-bounceinL{-ms-animation-name:bounceinL;animation-name:bounceinL}

/* 弹出 */
.hui-bounceout{-ms-animation-name:bounceout;animation-name:bounceout}
/* 弹出-向上 */
.hui-bounceoutT{-ms-animation-name:bounceoutT;animation-name:bounceoutT}
/* 弹出-向右 */
.hui-bounceoutR{-ms-animation-name:bounceoutR;animation-name:bounceoutR}
/* 弹出-向下 */
.hui-bounceoutB{-ms-animation-name:bounceoutB;animation-name:bounceoutB}
/* 弹出-向左 */
.hui-bounceoutL{-ms-animation-name:bounceoutL;animation-name:bounceoutL}

/* 转入 */
.hui-rotatein{-ms-animation-name:rotatein;animation-name:rotatein}
/* 转入-从左上 */
.hui-rotateinLT{-ms-animation-name:rotateinLT;animation-name:rotateinLT}
/* 转入-从左下 */
.hui-rotateinLB{-ms-animation-name:rotateinLB;animation-name:rotateinLB}
/* 转入-从右上 */
.hui-rotateinRT{-ms-animation-name:rotateinRT;animation-name:rotateinRT}
/* 转入-从右下*/
.hui-rotateinRB{-ms-animation-name:rotateinRB;animation-name:rotateinRB}

/* 转出 */
.hui-rotateout{-ms-animation-name:rotateout;animation-name:rotateout}
/* 转出-向左上 */
.hui-rotateoutLT{-ms-animation-name:rotateoutLT;animation-name:rotateoutLT}
/* 转出-向左下 */
.hui-rotateoutLB{-ms-animation-name:rotateoutLB;animation-name:rotateoutLB}
/* 转出-向右上 */
.hui-rotateoutRT{-ms-animation-name:rotateoutRT;animation-name:rotateoutRT}
/* 转出-向右下 */
.hui-rotateoutRB{-ms-animation-name:rotateoutRB;animation-name:rotateoutRB}

/* 翻转 */
.hui-flip{-ms-animation-name:flip;animation-name:flip}
/* 翻入-X轴 */
.hui-flipinX{-ms-animation-name:flipinX;animation-name:flipinX}
/* 翻入-Y轴 */
.hui-flipin,.hui-flipinY{-ms-animation-name:flipinY;animation-name:flipinY}
/* 翻出-X轴 */
.hui-flipoutX{-ms-animation-name:flipoutX;animation-name:flipoutX}
/* 翻出-Y轴 */
.hui-flipout,.hui-flipoutY{-ms-animation-name:flipoutY;animation-name:flipoutY}

/* 闪烁 */
.hui-flash{-ms-animation-name:flash;animation-name:flash}
/* 震颤 */
.hui-shake{-ms-animation-name:shake;animation-name:shake}
/* 摇摆 */
.hui-swing{-ms-animation-name:swing;animation-name:swing}
/* 摇晃 */
.hui-wobble{-ms-animation-name:wobble;animation-name:wobble}
/* 震铃 */
.hui-ring{-ms-animation-name:ring;animation-name:ring}


/* 淡入 */
@keyframes fadein{
  0%{opacity:0}
  100%{opacity:1}
}
/* 淡入-从上 */
@keyframes fadeinT{
  0%{opacity:0;transform:translateY(-100px)}
  100%{opacity:1;transform:translateY(0)}
}
/* 淡入-从右 */
@keyframes fadeinR{
  0%{opacity:0;transform:translateX(100px)}
  100%{opacity:1;transform:translateX(0)}
}
/* 淡入-从下 */
@keyframes fadeinB{
  0%{opacity:0;transform:translateY(100px)}
  100%{opacity:1;transform:translateY(0)}
}
/* 淡入-从左 */
@keyframes fadeinL{
  0%{opacity:0;transform:translateX(-100px)}
  100%{opacity:1;transform:translateX(0)}
}
/* 淡出 */
@keyframes fadeout{
  0%{opacity:1}
  100%{opacity:0}
}
/* 淡出-向上 */
@keyframes fadeoutT{
  0%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-100px)}
}
/* 淡出-向右 */
@keyframes fadeoutR{
  0%{opacity:1;transform:translateX(0)}
  100%{opacity:0;transform:translateX(100px)}
}
/* 淡出-向下 */
@keyframes fadeoutB{
  0%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(100px)}
}
/* 淡出-向左 */
@keyframes fadeoutL{
  0%{opacity:1;transform:translateX(0)}
  100%{opacity:0;transform:translateX(-100px)}
}
/* 弹跳 */
@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translateY(0)}
  40%{transform:translateY(-30px)}
  60%{transform:translateY(-15px)}
}
/* 弹入 */
@keyframes bouncein{
  0%{opacity:0;transform:scale(0.3)}
  50%{opacity:1;transform:scale(1.05)}
  70%{transform:scale(0.9)}
  100%{transform:scale(1)}
}
/* 弹入-从上 */
@keyframes bounceinT{
  0%{opacity:0;transform:translateY(-100px)}
  60%{opacity:1;transform:translateY(30px)}
  80%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}
/* 弹入-从右 */
@keyframes bounceinR{
  0%{opacity:0;transform:translateX(100px)}
  60%{opacity:1;transform:translateX(-30px)}
  80%{transform:translateX(10px)}
  100%{transform:translateX(0)}
}
/* 弹入-从下 */
@keyframes bounceinB{
  0%{opacity:0;transform:translateY(100px)}
  60%{opacity:1;transform:translateY(-30px)}
  80%{transform:translateY(10px)}
  100%{transform:translateY(0)}
}
/* 弹入-从左 */
@keyframes bounceinL{
  0%{opacity:0;transform:translateX(-100px)}
  60%{opacity:1;transform:translateX(30px)}
  80%{transform:translateX(-10px)}
  100%{transform:translateX(0)}
}
/* 弹出 */
@keyframes bounceout{
  0%{transform:scale(1)}
  25%{transform:scale(0.95)}
  50%{opacity:1;transform:scale(1.1)}
  100%{opacity:0;transform:scale(0.3)}
}
/* 弹出-向上*/
@keyframes bounceoutT{
  0%{transform:translateY(0)}
  20%{opacity:1;transform:translateY(20px)}
  100%{opacity:0;transform:translateY(-100px)}
}
/* 弹出-向右*/
@keyframes bounceoutR{
  0%{transform:translateX(0)}
  20%{opacity:1;transform:translateX(-20px)}
  100%{opacity:0;transform:translateX(100px)}
}
/* 弹出-向下 */
@keyframes bounceoutB{
  0%{transform:translateY(0)}
  20%{opacity:1;transform:translateY(-20px)}
  100%{opacity:0;transform:translateY(100px)}
}
/* 弹出-向左 */
@keyframes bounceoutL{
  0%{transform:translateX(0)}
  20%{opacity:1;transform:translateX(20px)}
  100%{opacity:0;transform:translateX(-200px)}
}
/* 转入 */
@keyframes rotatein{
  0%{opacity:0;transform:rotate(-200deg)}
  100%{opacity:1;transform:rotate(0)}
}
/* 转入-从左上 */
@keyframes rotateinLT{
  0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
  100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
/* 转入-从左下 */
@keyframes rotateineftB{
  0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
  100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
/* 转入-从右上 */
@keyframes rotateinRT{
  0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
  100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
}
/* 转入-从右下*/
@keyframes rotateinRB{
  0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
  100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
}
/* 转出 */
@keyframes rotateout{
  0%{transform-origin:center center;transform:rotate(0);opacity:1}
  100%{transform-origin:center center;transform:rotate(200deg);opacity:0}
}
/* 转出-向左上 */
@keyframes rotateoutLT{
  0%{transform-origin:left bottom;transform:rotate(0);opacity:1}
  100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
}
/* 转出-向左下 */
@keyframes rotateoutLB{
  0%{transform-origin:left bottom;transform:rotate(0);opacity:1}
  100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
}
/* 转出-向右上 */
@keyframes rotateoutRT{
  0%{transform-origin:right bottom;transform:rotate(0);opacity:1}
  100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
}
/* 转出-向右下 */
@keyframes rotateoutBR{
  0%{transform-origin:right bottom;transform:rotate(0);opacity:1}
  100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
}
/* 翻转 */
@keyframes flip{
  0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}
  40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}
  50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}
  80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in}
  100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}
}
/* 翻入-X轴 */
@keyframes flipinX{
  0%{transform:perspective(400px) rotateX(90deg);opacity:0}
  40%{transform:perspective(400px) rotateX(-10deg)}
  70%{transform:perspective(400px) rotateX(10deg)}
  100%{transform:perspective(400px) rotateX(0);opacity:1}
}
/* 翻入-Y轴 */
@keyframes flipinY{
  0%{transform:perspective(400px) rotateY(90deg);opacity:0}
  40%{transform:perspective(400px) rotateY(-10deg)}
  70%{transform:perspective(400px) rotateY(10deg)}
  100%{transform:perspective(400px) rotateY(0);opacity:1}
}
/* 翻出-X轴 */
@keyframes flipoutX{
  0%{transform:perspective(400px) rotateX(0);opacity:1}
  100%{transform:perspective(400px) rotateX(90deg);opacity:0}
}
/* 翻出-Y轴 */
@keyframes flipoutY{
  0%{transform:perspective(400px) rotateY(0);opacity:1}
  100%{transform:perspective(400px) rotateY(90deg);opacity:0}
}
/* 闪烁 */
@keyframes flash{
  0%,50%,100%{opacity:1}
  25%,75%{opacity:0}
}
/* 震颤 */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  10%,30%,50%,70%,90%{transform:translateX(-10px)}
  20%,40%,60%,80%{transform:translateX(10px)}
}
/* 摇摆 */
@keyframes swing{
  20%{transform:rotate(15deg)}
  40%{transform:rotate(-10deg)}
  60%{transform:rotate(5deg)}
  80%{transform:rotate(-5deg)}
  100%{transform:rotate(0)}
}
/* 摇晃 */
@keyframes wobble{
  0%{transform:translateX(0)}
  15%{transform:translateX(-100px) rotate(-5deg)}
  30%{transform:translateX(80px) rotate(3deg)}
  45%{transform:translateX(-65px) rotate(-3deg)}
  60%{transform:translateX(40px) rotate(2deg)}
  75%{transform:translateX(-20px) rotate(-1deg)}
  100%{transform:translateX(0)}
}
/* 震铃 */
@keyframes ring{
  0%{transform:scale(1)}
  10%,20%{transform:scale(0.9) rotate(-3deg)}
  30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}
  40%,60%,80%{transform:scale(1.1) rotate(-3deg)}
  100%{transform:scale(1) rotate(0)}
}